<template>
    <div>
        <div class="searchTop">
            <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
            <input type="text" placeholder="陈奕迅" v-model="searchKey" @keydown.enter="enterKey">
        </div>
        <div class="searchHistory">
            <span class="searchSpan">历史</span>
            <span v-for="item in keyWordList" :key="item" class="spanKey" @click="searchHistory(item)">
                {{item}}
            </span>
            <svg class="icon" aria-hidden="true" @click="delHistory">
                <use xlink:href="#icon-shanchu"></use>
            </svg>
        </div>
        <div class="itemList">
            <div class="item" v-for="(item,i) in searchList" :key="i">
                <div class="ltemLeft" @click="updateIndex(item)">
                    <span class="leftSpan">{{i+1}}</span>
                    <div>
                        <p>{{item.name}}</p>
                        <span class="arName" v-for="(item1,index) in item.ar" :key="index">{{item1.name}}</span>
                    </div>
                </div>
                <div class="itemRight">
                    <svg class="icon shipin" aria-hidden="true" v-if="item.mv!=0">
                        <use xlink:href="#icon-shipin"></use>
                    </svg>
                    <svg class="icon liebiao" aria-hidden="true">
                        <use xlink:href="#icon-31liebiao"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {getSearchMusic} from '@/request/api/home'
export default {
    data(){
        return{
            keyWordList:[],
            searchKey:'',
            searchList:[],
        }
    },
    mounted(){
        this.keyWordList=JSON.parse(localStorage.getItem('keyWordList'))||[];
    },
    methods:{
        enterKey:async function(){
            if(this.searchKey.trim()!==''){
                this.keyWordList.unshift(this.searchKey);
                //去重
                this.keyWordList=[...new Set(this.keyWordList)]
                //固定长度
                if(this.keyWordList.length>5){
                    this.keyWordList.pop();
                }
                localStorage.setItem("keyWordList",JSON.stringify(this.keyWordList));
                let res=await getSearchMusic(this.searchKey);
                console.log(res);
                this.searchList=res.data.result.songs;
                this.searchKey='';
            }
        },
        delHistory:function(){
            localStorage.removeItem('keyWordList');
            this.keyWordList=[];
        },
        searchHistory:async function(item){
            let res=await getSearchMusic(item);
            console.log(res);
            this.searchList=res.data.result.songs;
        },
        updateIndex:function(item){
            this.$store.commit("pushPlayList",item);
            this.$store.commit("updatePlayIndex",this.$store.state.playList.length-1);
        }
    }
}
</script>
<style lang="less" scoped>
.searchTop{
    width: 100%;
    height: 1rem;
    padding: .2rem;
    display: flex;
    align-items: center;
    input{
        margin-left: .2rem;
        border: none;
        border-bottom: 1px solid #999;
        width: 90%;
        padding: .1rem;
    }
}
.searchHistory{
    width: 100%;
    padding: 0 .2rem;
    position: relative;
    .searchSpan{
        font-weight: 700;
    }
    .spanKey{
        background-color: rgb(211, 204, 204);
        padding: .1rem .2rem;
        border-radius: .4rem;
        margin: .1rem .2rem;
        display: inline-block;
    }
    .icon{
        width: .4rem;
        height: .4rem;
        position: absolute;
        right: .2rem;
    }
}
.itemList{
    padding-bottom: 1.4rem;
    padding-left: .2rem;
    padding-right: .2rem;
    .item{
        width: 100%;
        height: 1.2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .ltemLeft{
            height: 100%;
            display: flex;
            align-items: center;
            .leftSpan{
                // margin-right: .2rem;
                width: .6rem;
            }
            .arName{
                font-size: .24rem;
                color: #888;
                margin-right: .1rem;
            }
        }
        .itemRight{
            height: 100%;
            display: flex;
            align-items: center;
            .shipin{
                fill: #888;
                margin-right: .2rem;
            }
            .liebiao{
                fill: #888;
            }
        }
    }
}
</style>